<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <script type="text/javascript" src="http://dev.ditu.live.com/mapcontrol/mapcontrol.ashx?v=6.1"></script>
<style type="text/css">
<!--
#w {
	height: 200px;
	width: 300px;
	margin-right: auto;
	margin-left: auto;
	filter:alpha(opacity=50);
	background-color: #003366;
}
-->
</style>
      <script type="text/javascript">
         var map = null;

         var LA = new VELatLong(39.9073, 116.2531);

         var pinPoint = null;
         var pinPixel = null;
         var myShapeLayer = null;
         
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap(LA, 15, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);
            map.AttachEvent('onclick', onMapClick); 
            //标识中心点
            AddCenterPin();
            
            myShapeLayer = new VEShapeLayer();
						map.AddShapeLayer(myShapeLayer);				
            //标识普通点，以后从数据库中取
            //武警总医院
						var point = new VELatLong(39.9084, 116.2643);
						AddCommonPin(map,point,"武警总医院","地址：北京市海淀区永定路69号<br>电话：010-88276688(总)");
						//301医院
						point = new VELatLong(39.9067, 116.2750);
						AddCommonPin(map,point,"中国解放军总医院","地址：北京市海淀区复兴路28号北京301医院<br>电话：010-66887329 66936619(咨询)<br>急救大夫数：20<br>可救助病人数：124");
						//清华大学玉泉医院
						point = new VELatLong(39.9078, 116.2466);
						var shape = AddCommonPin(map,point,"清华大学玉泉医院","石景山区石景山路5号<br>010-88257755(总)<br>急救大夫数：12<br>可救助病人数：72");
						//航天中心医院地图
						point = new VELatLong(39.9169, 116.2529);
						AddCommonPin(map,point,"航天中心医院","北京市海淀区玉泉路15号<br>010-59971199（总机）");
						
         }
         
				function AddCommonPin(map,point,address,desc){								
						
         		var myShape = new VEShape(VEShapeType.Pushpin, point);
         		myShape.SetCustomIcon("<img src='images/common.gif'/>"); 
         		myShape.SetTitle(address);
						myShape.SetDescription(desc);
						
         		myShapeLayer.AddShape(myShape);
						map.ClearInfoBoxStyles();
						map.ShowInfoBox(myShape);         		

				}
         
         function AddCenterPin()
         {
            // Add a new pushpin to the center of the map.
            pinPoint = map.GetCenter();
            pinPixel = map.LatLongToPixel(pinPoint);
            var pin = map.AddPushpin(pinPoint);
            pin.SetTitle('中心点');
            pin.SetDescription('玉泉路地铁');

         }
         
         function onMapClick(e)
					{ 
						if(e.latLong)
							alert(e.latLong);
						else
						{
							var x = e.mapX;
							var y = e.mapY;
							var pixel = new VEPixel(x, y);
							var LL = map.PixelToLatLong(pixel);
							
							document.getElementById("x").value=String(LL.Latitude).substring(0,String(LL.Latitude).indexOf('.')+5);
							document.getElementById("y").value=String(LL.Longitude).substring(0,String(LL.Latitude).indexOf('.')+6);
						}
					}  

      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:800px; height:600px;"></div>
        (Click to get latitude/longitude and zoom level)<br/>
        纬度：<input name="x" type="text" id="x" style="height:16px; display:inline; vertical-align:middle;">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        经度：<input name="y" type="text" id="y" style="height:16px; display:inline; vertical-align:middle;">
   </body>
</html>